<%--
  Created by IntelliJ IDEA.
  User: ajinlong
  Date: 2020/12/28
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<%--    <link rel="stylesheet" href="layui/css/layui.css">--%>
    <title>首页</title>
    <style>
        * {
            margin: auto;
        }

        li {
            list-style-type: none;
            padding: 5px;

        }

        li:hover {
            background-color: #d9d9d9;
        }

        li a {
            text-decoration: none;
            color: blue;
        }


        span {
            float: right;
        }

        .display_div {
            display: flex;
        }

        .td1{
            border: 2px #DDDDDD solid;
            padding-top: 5px;
            height: 300px;
        }
        .td1:hover{
            border: 3px solid lightskyblue;
        }

        .div_contain_td{
            height: 300px;
            overflow: hidden;
            /*display: block;*/
        }
    </style>
</head>

<body>

<div style="margin-bottom: 0;height: 260px;">
    <iframe src="header.jsp" scrolling="no" frameborder="0" width="100%" height="260px"></iframe>
</div>


<div class="display_div" style="width: 1000px;">
    <!-- 左边目录 -->
    <div style="width: 22%;border: solid 1px #f6a65b;margin-top: 0;">
        <p style="background-color: #f6a65b;">物品分类</p>
        <div style="background-color:white">
            <ul style="padding: 0;">
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0001" target="_top">.首页</a><span style="margin-right: 0;">></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0001" target="_top">.护肤</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0002" target="_top">.彩妆</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0003" target="_top">.香氛</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0004" target="_top">.身体护理</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0005" target="_top">.礼盒套装</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0006" target="_top">.母婴专区</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0007" target="_top">.男士专区</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0008" target="_top">.粉底</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0009" target="_top">.粉饼</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0010" target="_top">.睫毛膏</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0011" target="_top">.唇彩</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0012" target="_top">.腮红</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0013" target="_top">.食品保障</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0014" target="_top">.健身类</a><span>></span></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type_code=0015" target="_top">.美容类</a><span>></span></li>
            </ul>
        </div>
    </div>
    <!--右边详情  -->
    <div style="width: 78%;height:auto;margin-left: 2px;margin-top: 2px;">
        <div>
            <table>
                <tr>
                    <td>物品类型</td>
                    <td>
                        <select>
                            <option>护肤</option>
                            <option>彩妆</option>
                            <option>香氛</option>
                            <option>身体</option>
                            <option>礼盒</option>
                            <option>母婴</option>
                            <option>男士</option>
                            <option>粉底</option>
                            <option>粉饼</option>
                            <option>睫毛</option>
                            <option>唇彩</option>
                            <option>腮红</option>
                            <option>视频</option>
                            <option>健身</option>
                            <option>美容</option>
                        </select>
                    </td>
                    <td><input type="text"></td>
                    <td><button>搜索</button></td>
                </tr>
            </table>
        </div>

        <div>
            <div
                    style="background-color: #f6a65b;width: 100%;height: 35px;padding: 5px 5px 0 5px;position: relative;">
                <div style="background-color: white;width: 10%;height: 35px;position: absolute;bottom: 0;">
                        <span style="color: #f6a65b;font-weight: bold;position: absolute;left: 22px;top: 5px;">${title}
                        </span>
                </div>
            </div>
            <div>
                <table style="text-align: center;border-spacing: 10px 10px;table-layout: fixed;width: 790px" >
                    <tr>
                        <c:forEach var="li" items="${articlelist}" varStatus="status">
                        <td class="td1" >
                            <div class="div_contain_td">
                                <img class="img1" src="images/images/article/${li.image}" >
                                <p style="font-size: 15px;color: #CCCCCC;font-weight: bold">￥:${li.price}</p><p style="font-size: 17px;color: #FF0000;font-weight: bold;margin-left: 18px">￥:${li.discount}</p>
                                <p><a href="goodsinfo.jsp" style="color: black">${li.title}</a></p>
                            </div>

                        </td>
                        <c:if test="${status.count%4==0}">
                    <tr>
                        </c:if>
                        </c:forEach>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<%--下面--%>
<div style="width:100%; height:258px;margin-bottom: 0px;background-color:#F9F9F9;margin-top: 30px">
    <div align="center" style="border-top: 1px #E0E0E0 solid">
        <img src="images/images/step.jpg">
    </div>
</div>
<%--<script src="layui/layui.all.js"></script>--%>
<%--<script>--%>
<%--    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作--%>
<%--    layui.use('element', function () {--%>
<%--        var element = layui.element;--%>

<%--        //…--%>
<%--    });--%>
<%--</script>--%>
</body>

</html>